import React, { Component } from 'react'
import { Layout } from 'antd'
import Header from './header'
import Footer from './footer'
import Sider from './sider'
import Content from './content'
import { connect } from 'react-redux'
class MyLayout extends Component{
  
  render() {
    const layoutStyle = this.props.sidebarCollapsed ? { marginLeft: 80 } : { marginLeft: 300 }
    Object.assign(layoutStyle, { transition: 'margin-left 0.2s' })
    return (
      <Layout>
        <Sider style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }} width={300} />
        <Layout style={layoutStyle}>
          <Header />
          <Content />
          <Footer />
        </Layout>
      </Layout>
    )
  }
}
export default connect(state => ({ ...state.app }))(MyLayout)